import React from 'react'
import { View } from '@tarojs/components'
import ModuleTitle from '@COMPONENTS/ModuleTitle'
import { PlanManagementITF } from '@INTERFACES/PlanManagement'
import ManagementCard from '@COMPONENTS/PlanManagement/ManagementCard'
import { RouteSceneKey } from '@NAVIGATION/scenes'
import { useAcPermission } from '@HOOKS/useSpringRainLogin'
import style from './RelatedPlanManagement.module.scss'

interface Props {
  data: PlanManagementITF[]
  onClickMore: () => void
  showTopLine?: boolean
  disableContainer?: boolean
  isSmall?: boolean
  prevScene?: string
  requestId?: string
  isShowMore: boolean
}

const MAX_LENGTH = 1

const RelatedPlanManagement: React.FC<Props> = ({
  data, showTopLine = false, isSmall = false,
  disableContainer = false, prevScene, requestId, isShowMore, onClickMore
}) => {
  const language = 'zh'
  const { isSpringRain } = useAcPermission()
  if (isSpringRain) return null
  return (
    <>
      {showTopLine && <View className={style.topBlock} />}
      <View className={disableContainer ? style.mrBottom16 : style.container}>
        <ModuleTitle
          title="加入你的专属管理方案"
          showMore={isShowMore}
          showIcon={false}
          onClickMore={onClickMore}
        />
        {
          data.slice(0, MAX_LENGTH).map((item, idx) => (
            <ManagementCard
              key={item._id || item.p8Id || item.TemplateId}
              data={item}
              language={language}
              containerClass={isSmall ? style.containerSmall : ''}
              titleClass={isSmall ? style.nameSmall : ''}
              promoClass={isSmall ? style.promoNumSmall : ''}
              contentClass={isSmall ? style.contentSmall : ''}
              priceNumClass={isSmall ? style.priceNumSmall : ''}
              durationTitleClass={isSmall ? style.durationTitleSmall : ''}
              joinBtnClass={isSmall ? style.joinBtnSmall : ''}
              joinBtnTextClass={isSmall ? style.joinBtnTextSmall : ''}
              requestId={requestId}
              prevScene={prevScene}
              scene={RouteSceneKey.decisionResultPage}
            />
          ))
        }
      </View>
    </>
  )
}

export default RelatedPlanManagement
